<template>
    <div>
        <h1>房号添加</h1>
        <table>
            <thead>
                <tr>
                    <td>房号id</td>
                    <td>
                        <input type="text" v-model="data.BId" disabled>
                    </td>
                </tr>
                <tr>
                    <td>房号编号</td>
                    <td>
                        <input type="text" v-model="data.Fhname">
                    </td>
                </tr>
                <tr>
                    <td>房号外键</td>
                    <td>
                        <select  v-model="data.fxid">
                            <option value="0">请选择</option>
                            <option v-for="a in datalist" :value="a.FXId">{{ a.Fxname }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>房号图片</td>
                    <td>
                        <input type="file" @change="shang">
                        <img :src="'https://localhost:7293/'+data.fhtupian" style="height: 100px;width: 100px;">
                    </td>
                </tr>
                <tr>
                    <td>房号金额</td>
                    <td>
                        <input type="text" v-model="data.jiane">
                        
                    </td>
                </tr>
                <tr>
                    <td>房号状态</td>
                    <td>
                        <input type="radio" value="1"  v-model="data.zhuangtai">空
                        <input type="radio" value="2" v-model="data.zhuangtai">已入住
                        <input type="radio" value="3" v-model="data.zhuangtai">维修中
                        <input type="radio" value="4" v-model="data.zhuangtai">待处理
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="更新" @click="add">
                    </td>
                </tr>
            </thead>
        </table>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';

//实例化
const router=useRouter();
const route=useRoute();
const data=ref({
  "BId": 0,
  "Fhname": "",
  "fxid": 0,
  "fhtupian": "",
  "jiane": 0,
  "zhuangtai": 0
});
const add=()=>{
    axios.put("https://localhost:7293/api/Fhall/Update",data.value).then(res=>{
        if(res.data>0)
        {
            alert("更新成功");
            router.push({path:"/"});
        }
        else
        {
            alert("更新失败");
        }
    })
}
//图片
const shang=(e:any)=>{
    var n=e.target.files[0];
    var fn=new FormData();
    fn.append("file",n);
    axios.post("https://localhost:7293/api/info",fn).then(res=>{
        datafan.value.fhtupian=res.data;
    })
}
onMounted(()=>{
    datafor();
    datagetfan();
})
const datalist=ref([ {
    "FXId": 0,
    "Fxname": ""
  }]);
const datafor=()=>{
    axios.get("https://localhost:7293/api/Fhall/fxlist").then(res=>{
        datalist.value=res.data
    })
}

//反填
const datagetfan=(val:any)=>{
    var vid=route.query.id;
    axios.get("https://localhost:7293/api/Fhall/Fantian",{params:{id:vid}}).then(res=>{
        data.value=res.data;
    })
}



</script>

<style scoped>

</style>